<template>
	<view class="index pTab">
		<view class="indexTopBg"></view>
		<view class="indexCon">
			<view class="search" @click="goSearch">
				请输入关键词搜索
				<view class="searchDom">
					<image src="/pages/static/41.png" mode=""></image>
				</view>
			</view>
			<view class="indexBo">
				<!-- 轮播图d -->
				<view class="swiperDom" v-if="list5.length">
					<up-swiper :list="list5" @change="(e) => (current = e.current)" :autoplay="true" @click="swiperClick">
						<template #indicator>
							<view class="indicator">
								<view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
							</view>
						</template>
					</up-swiper>
				</view>
				<!-- 广告 -->
				<view class="indexAD" v-if="AdList.length">
					<view class="inADList dis">
						<view class="inADItem dis" v-for="item in AdList" :key="item.id">
							<view class="AdItemTop">
								<image :src="item.imageUrl" mode=""></image>
							</view>
							<view class="AdItemBot">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="indexPost">
				<view class="hotspot">
					<view class="hotspotTit dis">
						<view class="hotspotTitL">
							<image src="/pages/static/1.png" mode=""></image>
						</view>
						<view class="hotspotTitR">今日热帖</view>
					</view>
					<view class="hotspotConDom">
						<view class="hotspotCon" :class="animate ? 'marginTopTrue' : 'marginTopFalse'">
							<view class="hotspotItem ellipsis" @click="hotspotItem(item)" v-for="item in hotList" :key="item.id">{{ item.content }}</view>
						</view>
					</view>
				</view>
				<view class="tabs" :class="tabIndex == 0 ? 'tabsA' : ''">
					<up-tabs
						:list="list4"
						lineWidth="30"
						lineColor="#4f77e0"
						:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
						:current="tabIndex"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
						@click="changeTabs"
					></up-tabs>
				</view>
				<view class="postList">
					<view class="postItem" v-for="item in postAllList" :key="item.id" @click="clickPost(item)">
						<view class="postItemUser dis">
							<view class="PIUL dis">
								<view class="PIULT">
									<image :src="item.author.avatar" mode="aspectFill"></image>
								</view>
								<view class="PIULN">{{ item.author.nickname }}</view>
								<view class="PIULLV">{{ item.LVNum }}</view>
							</view>
							<view class="PIUR">{{ item.createTime }}</view>
						</view>
						<view class="postItemConT dis" v-if="item.title || item.isTop || item.isDigest || item.isHot">
							<view class="posType dis">
								<image v-if="item.isTop == 1" class="postTypeI" src="/pages/static/2.png" mode="scaleToFill"></image>
								<image v-if="item.isDigest == 1" class="postTypeI" src="/pages/static/3.png" mode="scaleToFill"></image>
								<image v-if="item.isHot == 1" class="postTypeH" src="/pages/static/1.png" mode="scaleToFill"></image>
							</view>
							<text v-if="item.title" class="posCon" :class="[`TI${item.isTHD}`]">{{ item.title }}</text>
							<view v-else class="posConS"></view>
						</view>
						<view class="postItemConC" :class="item.title || item.isTop || item.isDigest || item.isHot ? '' : 'pt20'">
							<text class="postItemConCV">{{ item.content }}</text>
						</view>
						<view class="postItemImg dis">
							<view class="postItemImgD" v-for="(ele, index) in item.imageUrls" :key="index">
								<image :src="ele" mode="aspectFill"></image>
							</view>
						</view>
						<view class="postItembot dis">
							<view class="pIBL dis">
								<view class="pIBL1">{{ item.plateName }}</view>
								<view class="pIBL2">{{ item.viewNum }}人围观</view>
							</view>
							<view class="pIBR dis">
								<view class="pIBR1 dis">
									<view class="pIBR11" @click.stop="upvote(item)">
										<image src="/pages/static/5.png" mode=""></image>
									</view>
									<view class="pIBR12">{{ item.likeNum }}</view>
								</view>
								<view class="pIBR1 dis">
									<view class="pIBR11">
										<image src="/pages/static/6.png" mode=""></image>
									</view>
									<view class="pIBR12">{{ item.postNum }}</view>
								</view>
								<view class="pIBR2" @click.stop="goShare(item)">
									<image src="/pages/static/7.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="skeleton" v-if="postAllList.length < total || request">
						<up-skeleton rows="3" title loading></up-skeleton>
					</view>
					<view class="noData p20" v-else>没有更多内容了，亲~</view>
				</view>
			</view>
		</view>
		<view class="goTop dis" @click="goTop" v-if="goTopBut">
			<up-icon name="arrow-up" color="#fff" size="26"></up-icon>
		</view>
		<!-- 底部导航 -->
		<custom-tabbar :activeIndex="currentTab" :isHint="isTip" />
	</view>
</template>

<script setup>
import { statisticsWebsitePVandUV, getMessageTip, getBanner, getAdList, getAdList2, hotPost, plateList, topThread, threadList, likePost } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { dealWithData } from '@/util/util.js';
import CustomTabbar from '@/components/custom-tabbar.vue';
const currentTab = ref(0);
const query = ref({});
const schoolInfo = ref({});

onLoad((options) => {
	statisticsWebsitePVandUV();
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
		uni.setNavigationBarTitle({
			title: school.schoolName + '校话'
		});
	}
	initFun();
	// console.log('页面参数:', options)
	// query.value = options
});

onShow(() => {
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
		uni.setNavigationBarTitle({
			title: school.schoolName + '校话'
		});
	}
	getMessageTipFun();
	currentTab.value = 0;
	getPlateList();
});
// 查询是否有消息未读
const isTip = ref(0);
const getMessageTipFun = async () => {
	const res = await getMessageTip();
	if (res.code == 0) {
		isTip.value = res.data.unreadCount;
	}
};
// 初始化
const initFun = () => {
	getBannerFun();
	getAdListFun();
	getHotList();
};
// 轮播图
const list5 = ref([]);
const swiperList = ref([]);
const current = ref(1);
const getBannerFun = async () => {
	const data = {
		type: '轮播图',
		position: '首页'
	};
	const res = await getAdList2(schoolInfo.value.schoolId, data);
	// console.log(res, 12);
	// const res = await getBanner({ departmentId: schoolInfo.value.schoolId });
	if (res.code == 0) {
		swiperList.value = res.data.list;
		const newList = res.data.list.map((item) => item.imageUrl);
		list5.value = newList;
		// console.log(list5.value);
	}
};
const swiperClick = (e) => {
	// console.log(e);
	const findItem = swiperList.value[e];
	// console.log(findItem);
	openAdvert(findItem);
};

// 首页添加墙墙
const AdList = ref([]);
const getAdListFun = async () => {
	const res = await getAdList({ departmentId: schoolInfo.value.schoolId });
	if (res.code == 0) {
		AdList.value = res.data.list;
	}
};

// 去搜索
const goSearch = () => {
	uni.navigateTo({
		url: '/post/search/index'
	});
};

// 热点动画
const hotList = ref([]);
const animate = ref(false);
let timer = null;
const getHotList = async () => {
	const res = await hotPost();
	// console.log(res)
	if (res.code == 0) {
		hotList.value = res.data.list;
	}
	if (timer) clearInterval(timer);
	timer = setInterval(() => {
		animateFun();
	}, 4000);
};
const animateFun = () => {
	animate.value = true;
	setTimeout(() => {
		hotList.value.push(hotList.value[0]);
		hotList.value.shift();
		animate.value = false;
	}, 500);
};
const hotspotItem = (item) => {
	// console.log(item)
	uni.navigateTo({
		url: `/post/post/postDetails?id=${item.id}`
	});
};

// tabs标签
const list4 = ref([]);
const tabsId = ref('');
const tabIndex = ref(0);
const getPlateList = async () => {
	const res = await plateList();
	if (res.code == 0) {
		const newList = res.data.list.map((item) => {
			return {
				name: item.plateName,
				...item
			};
		});
		const fixedList = [
			{
				name: '最新',
				id: 99
			},
			{
				name: '新回复',
				id: 98
			}
		];
		pageNum.value = 1;
		list4.value = [...fixedList, ...newList];
		tabsId.value = 99;
		getTopThread();
		getPostList(99);
	}
};
const changeTabs = (item) => {
	const index = list4.value.findIndex((ele) => ele.id === item.id);
	tabIndex.value = index;
	tabsId.value = item.id;
	postAllList.value = [];
	request.value = true;
	pageNum.value = 1;
	getPostList(tabsId.value);
};

// 帖子列表
const request = ref(true);
const postTopList = ref([]); //置顶
const postList = ref([]); //普通帖子
const postAllList = ref([]); //合并
const pageNum = ref(1);
const pageSize = ref(7);
const total = ref(10);
// 获取置顶帖子
const getTopThread = async () => {
	const res = await topThread();
	if (res.code == 0) {
		const newList = dealWithData(res.data.list);
		postTopList.value = newList;
	}
};
// 获取帖子列表
const getPostList = async (id) => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		departmentId: schoolInfo.value.schoolId,
		plateId: tabsId.value == 98 || tabsId.value == 99 ? '' : id,
		orderType: tabsId.value == 98 ? 'reply' : 'latest'
	};
	const res = await threadList(data);
	if (res.code == 0) {
		const newList = dealWithData(res.data.pageInfo.list);
		if (tabsId.value != 99) {
			postAllList.value = [...postAllList.value, ...newList];
		} else {
			if (pageNum.value != 1) {
				postAllList.value = [...postAllList.value, ...newList];
			} else {
				postAllList.value = [...postTopList.value, ...postAllList.value, ...newList];
			}
		}

		request.value = false;
		total.value = res.data.pageInfo.total;
	}
};

// 点赞
const upvote = async (ele) => {
	let action = 1;
	if (ele.isLiked == 0) {
		action = 1;
	} else {
		action = 0;
	}
	const res = await likePost(ele.id, { action });
	// console.log(res)
	if (res.code == 0) {
		postAllList.value.forEach((item) => {
			if (item.id == ele.id) {
				if (action == 1) {
					item.likeNum += 1;
					item.isLiked = 1;
				} else {
					item.likeNum = +item.likeNum - 1;
					item.isLiked = 0;
				}
			}
		});
	}
};
// 点击帖子
const clickPost = (item) => {
	// console.log(item)
	uni.navigateTo({
		url: `/post/post/postDetails?id=${item.id}`
	});
};
// 去分享
const goShare = (item) => {
	// console.log(item.id);
	uni.navigateTo({
		url: `/post/share/index?url=${item.id}`
	});
};

onReachBottom(() => {
	console.log('触底加载');
	if (postAllList.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getPostList(tabsId.value);
	}
});
const goTopBut = ref(false);
// 回顶部
const goTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
onPageScroll((e) => {
	// console.log('滚动距离为：' + e.scrollTop)
	if (e.scrollTop >= 400) {
		goTopBut.value = true;
	} else {
		goTopBut.value = false;
	}
});
const openAdvert = (item) => {
	// console.log(item);
	uni.navigateTo({
		url: `/pages/adPages/adPages?id=${item.id}`
	});
};
</script>

<style lang="scss">
@import '@/uni_modules/uview-plus/theme.scss';

.index {
	position: relative;
	width: 100%;
	z-index: 1;
	.indexTopBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 276rpx;
		background: linear-gradient(180deg, #8dadfa 0%, rgba(169, 175, 248, 0) 100%);
		z-index: 0;
	}
	.indexCon {
		position: relative;
		padding-top: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-style: normal;
		text-transform: none;
		z-index: 2;
		.search {
			position: relative;
			margin: auto;
			padding-left: 30rpx;
			width: 690rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: #ffffff;
			border-radius: 64rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			z-index: 3;
			.searchDom {
				position: absolute;
				top: 12rpx;
				right: 24rpx;
				z-index: 4;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.indexBo {
			padding: 20rpx 40rpx;
			.swiperDom {
				margin-bottom: 30rpx;
				width: 100%;
				height: 228rpx;
				border-radius: 24rpx;
				background: #ccc;
				overflow: hidden;
			}
			.indexAD {
				width: 100%;
				.inADList {
					width: 100%;
					height: 132rpx;
					overflow-x: auto;
					white-space: nowrap;
					-webkit-overflow-scrolling: touch;
					.inADItem {
						flex: 0 0 auto;
						flex-direction: column;
						align-items: center;
						margin-right: 30rpx;
						width: 144rpx;
						border-radius: 16rpx;
						background: #f5f6fd;
						.AdItemTop {
							margin: 16rpx 24rpx 8rpx 24rpx;
							width: 64rpx;
							height: 64rpx;
							border-radius: 15rpx;
							background-color: #8dadfa;
							image {
								border-radius: 15rpx;
							}
						}
						.AdItemBot {
							font-weight: 500;
							font-size: 24rpx;
							color: #6f7d8c;
						}
					}
				}
			}
		}
		.indexPost {
			padding: 40rpx;
			width: 100%;
			.hotspot {
				padding: 12rpx;
				width: 100%;
				height: 116rpx;
				background: #fff4e8;
				border-radius: 16rpx;
				overflow: hidden;
				.hotspotTit {
					.hotspotTitL {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
					.hotspotTitR {
						margin-left: 8rpx;
						font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
				}
				.hotspotConDom {
					height: 32rpx;
					overflow: hidden;
					.hotspotCon {
						.hotspotItem {
							margin-bottom: 20rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #6f7d8c;
						}
					}
					.marginTopTrue {
						margin-top: -30rpx;
						transition: all 0.5s;
					}
					.marginTopFalse {
						margin-top: 0rpx;
					}
				}
			}
			.tabs {
				margin-top: 30rpx;
			}
			.postList {
				padding-top: 10rpx;
				.postItem {
					padding: 20rpx 0;
					border-bottom: 2rpx solid #f4f4f4;
					.postItemUser {
						justify-content: space-between;
						align-items: center;
						.PIUL {
							align-items: center;
							.PIULT {
								margin-right: 16rpx;
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								overflow: hidden;
								background-color: #6f7d8c;
								image {
									width: 100%;
									height: 100%;
								}
							}
							.PIULN {
								margin-right: 20rpx;
								font-weight: 500;
								font-size: 26rpx;
								color: #666666;
							}
							.PIULLV {
								// margin-top: 15rpx;
								font-weight: 500;
								font-size: 26rpx;
								color: #999999;
							}
						}
						.PIUR {
							font-size: 24rpx;
							color: #999999;
						}
					}
					.postItemConT {
						position: relative;
						padding-top: 20rpx;
						.posType {
							position: absolute;
							top: 20rpx;
							left: 0;
							.postTypeI {
								margin-right: 15rpx;
								width: 58rpx;
								height: 32rpx;
							}
							.postTypeH {
								width: 36rpx;
								height: 36rpx;
							}
						}
						.posCon {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 700;
							font-size: 28rpx;
							color: #222222;
							word-spacing: 2rpx;
							letter-spacing: 2rpx;
						}
						.posConS {
							width: 100%;
							height: 45rpx;
						}
						.TI3 {
							//三个
							text-indent: 175rpx;
						}
						.TI2 {
							//两个长
							text-indent: 127rpx;
						}
						.TI1 {
							//一个长
							text-indent: 70rpx;
						}
						.TI4 {
							//一个短
							text-indent: 40rpx;
						}
						.TI0 {
							//一长一短
							text-indent: 110rpx;
						}
					}
					.postItemConC {
						.postItemConCV {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							font-weight: 400;
							font-size: 26rpx;
							color: #666;
						}
					}
					.postItemImg {
						padding-top: 16rpx;
						width: 100%;
						overflow: hidden;
						.postItemImgD {
							flex: 0 0 22.5%;
							margin-right: 20rpx;
							width: 152rpx;
							height: 152rpx;
							overflow: hidden;
							border-radius: 10rpx;
							background: #6f7d8c;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
					.postItembot {
						justify-content: space-between;
						align-items: center;
						padding-top: 20rpx;
						.pIBL {
							align-items: center;
							.pIBL1 {
								padding: 8rpx 16rpx;
								background: #fff6ed;
								border-radius: 8rpx;
								font-size: 24rpx;
								color: #f39f4b;
							}
							.pIBL2 {
								margin-left: 20rpx;
								font-size: 24rpx;
								color: #bcbfc3;
							}
						}
						.pIBR {
							.pIBR1 {
								align-items: center;
								margin-right: 35rpx;
								.pIBR11 {
									margin-right: 10rpx;
									image {
										width: 32rpx;
										height: 32rpx;
									}
								}
								.pIBR12 {
									font-size: 24rpx;
									color: #000000;
								}
							}
							.pIBR2 {
								image {
									width: 32rpx;
									height: 32rpx;
								}
							}
						}
					}
				}
				.postItem:last-child {
					border-bottom: none;
				}
			}
			.noData {
				width: 100%;
				color: #999;
				text-align: center;
			}
		}
	}
	.goTop {
		position: fixed;
		right: 15rpx;
		bottom: 130rpx;
		justify-content: center;
		align-items: center;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		z-index: 2025;
	}
}
image {
	width: 100%;
	height: 100%;
}
.tabsA {
	margin-left: -30rpx;
}
</style>
